<template>
  <view v-if="gridList.length" class="mine-grid" :style="{margin}">
    <view class="margin-bottom-20">
      <text class="text-32 color-t1 text-bold">{{ title }}</text>
    </view>
    <view class="flex-row flex-wrap padding-bottom-20">
      <view
        v-for="(item,index) in gridList"
        :key="index"
        class="mine-grid-item flex-column flex-center padding-tb-20"
        hover-class="hover"
        :hover-stay-time="70"
        @click="onclick(item)"
      >
        <image v-if="item.icon == 'icon_grabasingle.svg'" class="mine-grid-icon block" style="width: 53rpx;height: 53rpx;" :src="urls+item.icon" />
		<image v-else class="mine-grid-icon block" :src="urls+item.icon" />
        <text class="text-24 color-t1 margin-top-20">{{ item.label }}</text>
      </view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'MineGrid',
  props: {
    title: {
      type: String,
      default: ''
    },
    list: {
      type: Array,
      default: () => []
    },
    margin: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      urls: 'https://tbb-file.oss-cn-shenzhen.aliyuncs.com/tbb_admin_app/icon/'
    }
  },
  computed: {
    gridList() {
      const arr = []
      this.list.forEach(item => {
        if ((!item.auth || this.auth.includes(item.auth)) && ((this.isVip && item.needVip) || !item.needVip)) arr.push(item)
      })
      return arr
    },
    isVip() {
      if (this.userInfo && this.userInfo.vipServiceRecords && this.userInfo.vipServiceRecords.length) {
        const vipRecord = this.userInfo.vipServiceRecords[0]
        return (vipRecord.status == 0 && vipRecord.name.indexOf('免费版') < 0) || this.userInfo.certType == '0'
      }
      return false
    },
    ...mapGetters({
      auth: 'auth',
      userInfo: 'userInfo'
    })
  },
  methods: {
    onclick(item) {
      this.$emit('click', item)
    }
  }
}
</script>

<style scoped lang="scss">
.mine-grid{
  background: #FFFFFF;
  border-radius: 20rpx;
  padding:28rpx 32rpx 0;
}
.mine-grid-item{
  width:25%;
  border-radius:$radius-default;
}
.mine-grid-item::after{
  border:none;
}
.mine-grid-icon{
  width:64rpx;
  height:64rpx;
}
</style>
